<template>
  <bm-overlay
    ref="customOverlay"
    :class="{sample: true, active}"
    :style="{ backgroundImage: row.type === 'wait' ? 'url(' + OrgPoint + ')' : 'url(' + BluPoint + ')' }"
    pane="labelPane"
    @draw="draw"
  >
    <div class="text" v-text="text" />
    <div v-show="active" ref="infoRef" class="info">
      <span class="el-icon-close close-btn" @click.stop="handleClose" />
      <el-descriptions size="medium" :label-style="labelStyle" :content-style="contentStyle" :column="2">
        <el-descriptions-item label="订单号">{{ temp ? temp.orderCode : '' }}</el-descriptions-item>
        <el-descriptions-item label="客户编号">{{ temp ? temp.csmCode : '' }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{ temp ? temp.contact : '' }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ temp ? temp.contactPhone : '' }}</el-descriptions-item>
        <el-descriptions-item label="站点">{{ temp ? temp.orgName : '' }}</el-descriptions-item>
        <el-descriptions-item label="距离">{{ temp ? temp.distance : '' }}</el-descriptions-item>
        <el-descriptions-item label="配送员编号">{{ distributionWork.userName }}</el-descriptions-item>
        <el-descriptions-item label="配送员姓名">{{ distributionWork.userCode }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions size="medium" :label-style="labelStyle" :content-style="contentStyle" :column="1">
        <el-descriptions-item label="地址">{{ temp ? temp.csmAddress : '' }}</el-descriptions-item>
        <el-descriptions-item label="商品描述">{{ temp ? temp.goodsDesc : '' }}</el-descriptions-item>
        <el-descriptions-item label="签收时间">{{ temp ? parseTime(temp.signDt, '{y}-{m}-{d} {h}:{m}:{s}') : '' }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </bm-overlay>
</template>

<script>
  import { parseTime } from '@/utils'
  import { queryByUserId } from '@/api'
  export default {
    name: 'my-overlay',
    props: ['text', 'position', 'row'],
    data() {
      return {
        parseTime: parseTime,
        temp: null,
        active: false,
        labelStyle: { 'white-space': 'nowrap' },
        contentStyle: { 'word-break': 'break-all' },
        redPoint: require('@/assets/pointRed.svg'),
        OrgPoint: require('@/assets/pointOrg.svg'),
        BluPoint: require('@/assets/pointBlu.svg'),
        distributionWork: {
          userName: '',
          userCode: ''
        }
      }
    },
    watch: {
      position: {
        handler() {
          this.$refs.customOverlay.reload()
        },
        deep: true
      }
    },
    methods: {
      getData(item) {
        this.temp = Object.assign({}, item)
        this.queryByUserId(this.temp)
      },
      async queryByUserId(temp) {
        this.distributionWork = {}
        if (temp.ownerId) {
          const res = await queryByUserId({ userId: temp.ownerId })
          if (res.data) {
            this.distributionWork = res.data
          }
        }
      },
      draw({ el, BMap, map }) {
        const { lng, lat } = this.position
        const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
        el.style.left = pixel.x - 20 + 'px'
        el.style.top = pixel.y - 30 + 'px'
      },
      handleClose() {
        this.active = false
      }
    }
  }
</script>

<style lang="scss" scoped>
.sample {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  .text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
  }
}
.active {
  position: relative;
  background-size: 100% 100%;
  .info {
    position: absolute;
    top: -290px;
    left: -240px;
    z-index: 999;
    width: 520px;
    // max-height: 50px;
    height: 280px;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    .close-btn {
      position: relative;
      left: 480px;
      font-size: 20px;
      cursor: pointer;
    }
    &::after {
      position: absolute;
      right: 0;
      bottom: -10px;
      left: 0;
      display: inline-block;

      /* 内容宽高均为0 */
      width: 0;
      height: 0;
      margin: 0 auto;
      border: 10px solid #fff;

      /* 下边框设为none */
      border-bottom: none;
      border-right-color: transparent;

      /* 左右设为透明色 */
      border-left-color: transparent;
      content: '';
    }
  }
}
</style>
